<template>
  <div class="home">
    <img alt="Vue logo" :src="logoImg">
    <HelloWorld 
      msg="Welcome to Your Vue.js + TypeScript App"
      pageName="Home"
    />
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import { fetchData } from '@/utils/fetch'
import { API_EXPRESS } from '@/utils/api'
import HelloWorld from '@/components/HelloWorld.vue'
import logoImg from '@/assets/logo.png'

const data = ref<any>(null)
const loadData = async (): Promise<void> => {
  try {
    data.value = await fetchData(API_EXPRESS.categories, {}, 500)
  } catch (error) {
    console.error('Error loading data:', error)
  }
}
onMounted(() => {
  loadData()
})
</script>
